<template>
  <a-spin :spinning="loading">
    <a-tabs v-model:activeKey="activeKey" animated>
      <a-tab-pane tab="项目信息" key="insurancePolicy" :forceRender="true">
        <a-form v-bind="formItemLayout">
          <a-row>
        <a-col :span="12">
          <a-form-item label="项目名称" v-bind="validateInfos.projectName">
            <a-input v-model:value="formData.projectName"
                     :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="项目编号" v-bind="validateInfos.projectId">
            <a-input v-model:value="formData.projectId"
                     :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="招标人名称" v-bind="validateInfos.insuredName">
            <a-input v-model:value="formData.insuredName"
                     :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="开标日期" v-bind="validateInfos.openDate">
            <a-date-picker placeholder="请选择开标日期" v-model:value="formData.openDate"
                           showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
                           :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="保证金" v-bind="validateInfos.bond">
            <a-input-number v-model:value="formData.bond" placeholder="请输入保证金"
                            style="width: 100%" :disabled="disabled"/>

          </a-form-item>
        </a-col>
          </a-row>
        </a-form>
      </a-tab-pane>
    </a-tabs>
    <a-tabs v-model:activeKey="activeKey" animated>
      <a-tab-pane tab="保单信息" key="insurancePolicy" :forceRender="true">
        <a-form v-bind="formItemLayout">
          <a-row>
            <a-col :span="12">
              <a-form-item label="保单号" v-bind="validateInfos.policyNo">
                <a-input v-model:value="formData.policyNo"
                         :disabled="disabled"></a-input>
                <a :href="formData.policyDownloadUrl" target="_blank">下载保单</a>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="出保时间" v-bind="validateInfos.insureActiveDate">
                <a-date-picker
                               v-model:value="formData.insureActiveDate" showTime
                               value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
                               :disabled="disabled"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="保险种类" v-bind="validateInfos.insuranceType">
                <j-dict-select-tag v-model:value="formData.insuranceType" dictCode="BXZL"
                                   :disabled="disabled"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="保险公司" v-bind="validateInfos.insuranceCompany">
                <j-dict-select-tag v-model:value="formData.insuranceCompany" dictCode="BXGS"  :disabled="disabled"/>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="保险起始日期" v-bind="validateInfos.insureStartDate">
                <a-date-picker
                               v-model:value="formData.insureStartDate" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="保险终止日期" v-bind="validateInfos.insureEndDate">
                <a-date-picker
                               v-model:value="formData.insureEndDate" showTime
                               value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
                               :disabled="disabled"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="被保人" v-bind="validateInfos.insuredName">
                <a-input v-model:value="formData.insuredName"
                         :disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="投保人名称" v-bind="validateInfos.policyHolderName">
                <a-input v-model:value="formData.policyHolderName"
                         :disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="投保人社会统一信用代码" v-bind="validateInfos.policyUcc">
                <a-input v-model:value="formData.policyUcc"
                         :disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="投保联系人名称" v-bind="validateInfos.policyLinkmanName">
                <a-input v-model:value="formData.policyLinkmanName"
                          :disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="投保联系人手机号" v-bind="validateInfos.policyLinkmanMobilename">
                <a-input v-model:value="formData.policyLinkmanMobilename"
                         :disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="保额" v-bind="validateInfos.premium">
                <a-input-number v-model:value="formData.premium"
                                style="width: 100%" :disabled="disabled"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="费率" v-bind="validateInfos.rate">
                <a-input-number v-model:value="formData.rate"
                                style="width: 100%" :disabled="disabled"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="保险状态" v-bind="validateInfos.policyState">
                <j-dict-select-tag v-model:value="formData.policyState" dictCode="TBBXZT"
                                   :disabled="disabled"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="发票状态" v-bind="validateInfos.invoiceState">
                <j-dict-select-tag v-model:value="formData.invoiceState" dictCode="FPZT"
                                   :disabled="disabled"/>
                <a :href="formData.invoiceDownloadUrl" target="_blank">下载发票</a>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="发票类型" v-bind="validateInfos.invoiceType">
                <j-dict-select-tag v-model:value="formData.invoiceType" dictCode="FPLX"  :disabled="disabled"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="发票收件人" v-bind="validateInfos.invoiceAddressee">
                <a-input v-model:value="formData.invoiceAddressee" placeholder="请输入发票收件人" :disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="发票收件人手机号" v-bind="validateInfos.invoiceAddresseePhone">
                <a-input v-model:value="formData.invoiceAddresseePhone" placeholder="请输入发票收件人手机号" :disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="发票收件地址" v-bind="validateInfos.invoiceAddress">
                <a-input v-model:value="formData.invoiceAddress" placeholder="请输入发票收件地址" :disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-tab-pane>
    </a-tabs>

  </a-spin>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, toRaw} from 'vue';
import {queryInsurancePolicyListByMainId} from '../InsuranceOrder.api';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
import {useMessage} from '/@/hooks/web/useMessage';
import {Form} from 'ant-design-vue';

const useForm = Form.useForm;

export default defineComponent({
  name: 'InsurancePolicyForm',
  components: {
    JDictSelectTag,
    JSelectDept,
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const {createMessage} = useMessage();
    const isForm = true;
    const loading = ref(false);
    const formData = reactive<Record<string, any>>({
      id: '',
      policyNo: '',
      insuranceCompany: '',
      area: '',
      insuranceType: '',
      insuranceCode: '',
      copies: '',
      projectName: '',
      projectType: '',
      projectId: '',
      insuredName: '',
      insuredUcc: '',
      insuredLinkmanName: '',
      policyHolderName: '',
      policyIdType: '',
      policyUcc: '',
      policyLinkmanName: '',
      policyLinkmanMobilename: '',
      premium: '',
      rate: '',
      policyState: '',
      insureDate: '',
      insureActiveDate: '',
      insureStartDate: '',
      insureEndDate: '',
      specialAgreement: '',
      policyDownloadUrl: '',
      invoiceState: '',
      invoiceType: '',
      invoiceDownloadUrl: '',
      invoiceEmail: '',
      invoiceAddressee: '',
      invoiceAddresseePhone: '',
      invoiceAddress: '',
      invoiceHead: '',
      invoiceCuscCode: '',
      invoiceRegisteredAddress: '',
      invoiceBankInfo: '',
      invoiceBankAcc: '',
      invoicePhoneNo: '',
      areaId: '',
      openDate: '',
      bond: '',
    });
    //表单验证
    const validatorRules = reactive({
      insuranceCompany: [{required: true, message: '请输入保险公司!'},],
      area: [{required: true, message: '请输入地区编码!'},],
      insuranceType: [{required: true, message: '请输入保险种类!'},],
      insuranceCode: [{required: true, message: '请输入保险产品代码!'},],
      copies: [{required: true, message: '请输入保险份数!'},],
      projectName: [{required: true, message: '请输入项目名称!'},],
      projectType: [{required: true, message: '请输入项目类型!'},],
      projectId: [{required: true, message: '请输入项目编号!'},],
      insuredName: [{required: true, message: '请输入招标人名称（被保人）!'},],
      policyHolderName: [{required: true, message: '请输入投保人名称!'},],
      policyIdType: [{required: true, message: '请输入投保人证件类型!'},],
      policyUcc: [{required: true, message: '请输入投保人社会统一信用代码!'},],
      premium: [{required: true, message: '请输入保额!'},],
      rate: [{required: true, message: '请输入费率!'},],
      policyState: [{required: true, message: '请输入保险状态!'},],
      insureDate: [{required: true, message: '请输入投保日期!'},],
      areaId: [{required: true, message: '请输入区域!'},],
    })
    const {
      resetFields,
      validate,
      validateInfos
    } = useForm(formData, validatorRules, {immediate: true});
    const formItemLayout = {
      labelCol: {xs: {span: 24}, sm: {span: 5}},
      wrapperCol: {xs: {span: 24}, sm: {span: 16}},
    };

    async function initFormData(mainId) {
      resetFields();
      if (mainId) {
        let list = await queryInsurancePolicyListByMainId(mainId);
        if (list && list.length > 0) {
          let temp = list[0];
          Object.keys(temp).map(k => {
            formData[k] = temp[k];
          })
        }
      }
    }

    async function getFormData() {
      await validate();
      let subFormData = toRaw(formData);
      if (Object.keys(subFormData).length > 0) {
        return subFormData
      }
      return false;
    }

    function setFieldsValue(values) {
      if (values) {
        Object.keys(values).map(k => {
          formData[k] = values[k];
        });
      }
    }

    /**
     * 值改变事件触发-树控件回调
     * @param key
     * @param value
     */
    function handleFormChange(key, value) {
      formData[key] = value;
    }


    return {
      loading,
      formData,
      formItemLayout,
      initFormData,
      getFormData,
      setFieldsValue,
      handleFormChange,
      isForm,
      validateInfos
    }
  }
});
</script>
